<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>28_事件的类型</title>
    <style>
      .container,
      .container_02 {
        margin: 20px auto;
        width: 50vw;
        height: 200px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <input type="text" id="txtInput" />
    <div class="container" index="0">当前移动：</div>
    <div class="container" index="1">当前移动：</div>
    <div class="container" index="2">当前移动：</div>
    <script>
      document.querySelector("#txtInput").addEventListener("keyup", (event) => {
        // alert("弹起");
        // if(event.keyCode === 13){
        //     alert('按下了回车')
        // }
        if(event.key === 'Enter'){
            alert('按下了回车')
        }
      });
      document.querySelector("#txtInput").addEventListener("keydown", () => {
        // alert("按下");
      });
      
      // input在改变的时候实时变化
      document.querySelector("#txtInput").addEventListener("input", () => {
        console.log("123");
      });
      // 失焦才会触发
      // document.querySelector('#txtInput').addEventListener('change',()=>{
      //     console.log('123');

      // })
      document.querySelectorAll(".container").forEach((dom, index) => {
        let count1 = 0;
        let count2 = 0;
        let count3 = 0;
        dom.addEventListener("mousemove", (event) => {
          if (dom.getAttribute("index") === "0") {
            count1++;
            event.target.innerText = `当前移动:${count1}`;
            event.target.style.color = 'blue'
            event.target.style.backgroundColor = '#46c86f'
            // document.querySelector(
            //   "div[index='0']"
            // ).innerText = `当前移动:${count1}`;
          } else if (dom.getAttribute("index") === "1") {
            count2++;
            event.target.innerText = `当前移动:${count2}`;
            event.target.style.color = 'red'
            event.target.style.backgroundColor = '#b07ffd'
            // document.querySelector(
            //   "div[index='1']"
            // ).innerText = `当前移动:${count2}`;
          } else {
            count3++;
            event.target.innerText = `当前移动:${count3}`;
            event.target.style.color = 'brown'
            event.target.style.backgroundColor = '#b58a7e'
            // document.querySelector(
            //   "div[index='2']"
            // ).innerText = `当前移动:${count3}`;
          }
        });
      });
    </script>
  </body>
</html>
